import Vue from 'vue'
// 1.1 导入路由的包
import VueRouter from 'vue-router'

// 1.2 安装路由
Vue.use(VueRouter)

// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装vue-resource
Vue.use(VueResource)

// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 每次刚进入网站，肯定会调用main.js在刚调用的时候，先从本地存储中把购物车中的数据
// 读取出来，
// var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
    state: {
        // this.$store.state.***
        userId: '1bdbcb29c7164cb0b4dc6c7d8bcdfca0',
        car: {} ,// 将购物车中商品数据，用一个数组存储起来，在car数组中，存商品对象，
        // 我们可以暂时将商品对象设置为，{id:商品id，count:要购买的数量,price:商品单价，selected:false}
        count: 0,
        amount: 0.00
    },
    mutations: {
        // this.$store.commit('','')
        addToCar(state,goodsinfo) {

            // // 点击加入购物车，把商品信息保存到store中的car上
            // // 分析：1. 如果购物车中，之前就已经有这个对应的商品了，那么，只需要更新数量
            // // 2. 如果没有，则直接把商品数据push到car中即可
            // // 假设在购物车中，没有找到对应的商品
            // var flag = false

            // state.car.carGoods.some(item => {
            //     if(item.commodityId === goodsinfo.commodityId) {
            //         item.commodityQuantity = parseInt(goodsinfo.commodityQuantity)
            //         item.pictureUrl = goodsinfo.picture
            //         flag = true;
            //         return true;
            //     }
            // })
            // // 如果最终，循环完毕，得到的flag还是false，就把商品放到购物车中
            // if(!flag) {
            //     state.car.carGoods.push(goodsinfo)
            // }


            // // 当更新car之后，把car数组，存储到本地数据存储中
            // localStorage.setItem('car',JSON.stringify(state.car))
            // // 将car中的数据插入购物车数据表
        },
        updateGoodsInfo(state,goodsinfo) {
            // 修改购物车中商品数量值
            var quantity = 0;
            state.car.carGoods.some(item=>{
                if(item.commodityId == goodsinfo.commodityId) {
                    item.commodityQuantity = parseInt(goodsinfo.commodityQuantity);
                    item.amount = parseInt(item.sellPrice * item.commodityQuantity);
                    return true;
                }
            })
            state.car.carGoods.forEach(item =>{
                if(item.selected === true){
                    quantity = quantity + item.commodityQuantity
                }
            })
            state.count = quantity
            var amount = 0.00;
            state.car.carGoods.forEach(item =>{
                if(item.selected === true){
                amount = amount + item.amount;
                }
            })
            state.amount = amount;
        },
        saveCar(state,car){
            state.car =car;
        },
        removeGoods(state,commodityId) {
            state.car.carGoods.some(item => {
                if(commodityId === item.commodityId) {
                    state.car.carGoods.splice(commodityId,1);
                    return true;
                }
            })
        },
        setAllCount(state) {
            var c = 0;
            state.car.carGoods.forEach(item =>{
                if(item.selected === true){
                c = c + item.commodityQuantity
                }
            })
            state.count = c;
        },
        setAllAmount(state) {
            var amount = 0.00;
            state.car.carGoods.forEach(item =>{
                if(item.selected === true){
                amount = amount + item.amount;
                }
            })
            state.amount = amount;
        }
    },
    getters: {
        // this.$store.getters.***
        // 相当于计算属性，也相当于filters
        // getAllCount(state) {
        //     var c = 0;
        //     state.car.carGoods.forEach(item =>{
        //         c = c + item.commodityQuantity
        //     })
        //     this.count = c;
        // },
    }
});

// 导入bootstrap样式
import 'bootstrap3/dist/css/bootstrap.css'
import './css/toast.css'

// 导入格式化时间插件
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})



// 设置请求的根路径
Vue.http.options.root = 'http://localhost:8010'
// 设置post时候的表单数据格式
// Vue.http.options.emulateJSON = false;

// 导入mui的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


// 按需导入 mint-ui中的组件
// import {Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui'
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name,Swipe)
// Vue.component(SwipeItem.name,SwipeItem)
// Vue.component(Button.name,Button)
// Vue.use(Lazyload);

import MinUI from 'mint-ui'
Vue.use(MinUI)
import 'mint-ui/lib/style.css'

// 安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview,{
    mainClass: 'pswp--minimal--dark',
    barsSize: {top: 0, bottom: 0},
    captionEl: false,
    fullscreenEl: false,
    shareEl: false,
    bgOpacity: 0.85,
    tapToClose: true,
    tapToToggleControls: false
})

import app from './App.vue'

// 1.3 导入自己的router.js路由模块

import router from './router.js'



var vm = new Vue({
    el: '#app',
    render:c => c(app),
    router, //1.4 挂载路由对象到路由实例上
    store //挂载store状态管理对象
})